<template>
  <drag-dialog title="页面交互配置" v-model="showDialog" @close="close">
    <div class="func-edit">
      <div class="edit-header">
        <div class="header-item">
          <div class="header-label">函数名称</div>
          <el-input v-model="localData.funcLabel" placeholder="请输入函数名称" clearable />
        </div>
        <div class="header-item">
          <div class="header-label">函数标识</div>
          <el-input v-model="localData.funcName" placeholder="请输入函数标识" clearable />
        </div>
      </div>
      <div class="edit-content">
        <code-editor :languageSelector="false" :themeSelector="false" v-model="localData.funcDefi" height="500px" />
      </div>
    </div>
    <template #footer>
      <dialog-footer @ok="submit" @cancel="close" />
    </template>
  </drag-dialog>
</template>

<script>
import CodeEditor from '@/components/CodeEditor/src/CodeEditor.vue'

export default {
  components: { CodeEditor },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showDialog: false,
      localData: {}
    }
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.showDialog = newVal
      },
      immediate: true
    },
    showDialog: {
      handler(newVal) {
        this.$emit('update:modelValue', newVal)
      }
    },
    data: {
      handler(val) {
        this.localData = val
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    submit() {
      this.$emit('submit', this.localData)
      this.close()
    },
    close() {
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.func-edit {
  display: flex;
  flex-direction: column;
  gap: 40px;

  .edit-header {
    display: flex;
    align-items: center;
    gap: 40px;

    .header-item {
        display: flex;
        align-items: center;
        gap: 4px;

        .header-label {
            width: 80px
        }
    }
  }

  .edit-content {
    width: 100%;
  }
}
</style>
